<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>下载</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    <link rel="stylesheet" href="../css/style.css" />
    <style>
      .download-tab {
        display: flex;
        background-color: white;
        border-bottom: 1px solid #f2f2f2;
        padding: 12px 16px;
      }
      .download-tab-item {
        flex: 1;
        text-align: center;
        padding: 8px 0;
        font-size: 15px;
        color: #666;
        position: relative;
      }
      .download-tab-item.active {
        color: #007aff;
        font-weight: 500;
      }
      .download-tab-item.active:after {
        content: "";
        position: absolute;
        bottom: -12px;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 3px;
        background-color: #007aff;
        border-radius: 3px;
      }
      .download-item {
        padding: 16px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f0f0f0;
        background-color: white;
      }
      .download-icon {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        margin-right: 16px;
        object-fit: cover;
      }
      .download-info {
        flex: 1;
      }
      .download-name {
        font-size: 16px;
        margin-bottom: 4px;
        font-weight: 500;
      }
      .download-meta {
        display: flex;
        align-items: center;
        color: #999;
        font-size: 13px;
        margin-bottom: 4px;
      }
      .download-size {
        margin-right: 12px;
      }
      .download-status {
        display: flex;
        align-items: center;
      }
      .download-progress {
        width: 100%;
        height: 3px;
        background-color: #f0f0f0;
        border-radius: 3px;
        margin-top: 4px;
      }
      .download-progress-bar {
        height: 100%;
        border-radius: 3px;
        background-color: #007aff;
      }
      .download-btn {
        min-width: 80px;
        padding: 7px 12px;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        border-radius: 20px;
      }
      .download-btn.primary {
        background-color: #007aff;
        color: white;
      }
      .download-btn.secondary {
        background-color: #f2f2f2;
        color: #666;
      }
      .download-btn.danger {
        background-color: #ff3b30;
        color: white;
      }
      .download-section-title {
        padding: 16px 16px 8px;
        font-size: 18px;
        font-weight: 600;
        color: #333;
      }
      .download-empty {
        padding: 40px 16px;
        text-align: center;
      }
      .download-empty-icon {
        font-size: 48px;
        color: #ccc;
        margin-bottom: 16px;
      }
      .download-empty-text {
        font-size: 15px;
        color: #999;
        margin-bottom: 20px;
      }
      .download-empty-btn {
        display: inline-block;
        padding: 10px 24px;
        background-color: #007aff;
        color: white;
        border-radius: 20px;
        font-weight: 500;
      }
    </style>
  </head>
  <body>
    <div class="iphone-container">
      <!-- iOS 状态栏 -->
      <div class="status-bar">
        <div class="status-bar-icons">
          <span class="time">14:30</span>
        </div>
        <div class="status-bar-icons">
          <i class="fas fa-signal"></i>
          <i class="fas fa-wifi ml-2"></i>
          <i class="fas fa-battery-full ml-2"></i>
        </div>
      </div>

      <!-- 顶部导航 -->
      <div
        class="flex justify-between items-center px-4 py-2 bg-white sticky top-0 z-10"
      >
        <div class="text-xl font-semibold">下载</div>
        <div>
          <i class="fas fa-ellipsis-v text-gray-600 text-lg"></i>
        </div>
      </div>

      <!-- 下载标签页 -->
      <div class="download-tab">
        <div class="download-tab-item active">正在下载</div>
        <div class="download-tab-item">已完成</div>
        <div class="download-tab-item">更新</div>
      </div>

      <!-- 主要内容区域 -->
      <div class="content bg-gray-50 pb-20">
        <!-- 正在下载 -->
        <div class="download-section-title">今天</div>
        <div class="download-item">
          <img
            src="https://is1-ssl.mzstatic.com/image/thumb/Purple116/v4/05/16/67/051667e1-3d48-6978-51d4-90a57b4419e7/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/460x0w.webp"
            alt="原神"
            class="download-icon"
          />
          <div class="download-info">
            <div class="download-name">原神</div>
            <div class="download-meta">
              <div class="download-size">4.2 GB</div>
              <div class="download-status">
                <i class="fas fa-arrow-down mr-1"></i>
                <span>下载中 - 65%</span>
              </div>
            </div>
            <div class="download-progress">
              <div class="download-progress-bar" style="width: 65%"></div>
            </div>
          </div>
          <button class="download-btn secondary">暂停</button>
        </div>

        <div class="download-item">
          <img
            src="https://is1-ssl.mzstatic.com/image/thumb/Purple126/v4/71/0a/62/710a62e2-7f95-8403-d6f7-91f3361d8d2e/AppIcon-0-0-1x_U007emarketing-0-0-0-10-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/460x0w.webp"
            alt="崩坏：星穹铁道"
            class="download-icon"
          />
          <div class="download-info">
            <div class="download-name">崩坏：星穹铁道</div>
            <div class="download-meta">
              <div class="download-size">5.1 GB</div>
              <div class="download-status">
                <i class="fas fa-arrow-down mr-1"></i>
                <span>下载中 - 28%</span>
              </div>
            </div>
            <div class="download-progress">
              <div class="download-progress-bar" style="width: 28%"></div>
            </div>
          </div>
          <button class="download-btn secondary">暂停</button>
        </div>

        <div class="download-item">
          <img
            src="https://is1-ssl.mzstatic.com/image/thumb/Purple116/v4/f5/77/96/f5779614-9cea-1212-3cdd-fbbf6f9d1bfc/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/460x0w.webp"
            alt="淘宝"
            class="download-icon"
          />
          <div class="download-info">
            <div class="download-name">淘宝</div>
            <div class="download-meta">
              <div class="download-size">169 MB</div>
              <div class="download-status">
                <i class="fas fa-circle-notch fa-spin mr-1"></i>
                <span>正在准备</span>
              </div>
            </div>
          </div>
          <button class="download-btn danger">取消</button>
        </div>

        <!-- 等待下载 -->
        <div class="download-section-title">等待下载</div>
        <div class="download-item">
          <img
            src="https://is1-ssl.mzstatic.com/image/thumb/Purple116/v4/e7/38/85/e738855e-7637-3d47-6853-a144b8db3cf3/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/460x0w.webp"
            alt="QQ音乐"
            class="download-icon"
          />
          <div class="download-info">
            <div class="download-name">QQ音乐</div>
            <div class="download-meta">
              <div class="download-size">86 MB</div>
              <div class="download-status">
                <i class="fas fa-pause-circle mr-1"></i>
                <span>等待中</span>
              </div>
            </div>
          </div>
          <button class="download-btn primary">下载</button>
        </div>

        <!-- 已暂停 -->
        <div class="download-section-title">已暂停</div>
        <div class="download-item">
          <img
            src="https://is1-ssl.mzstatic.com/image/thumb/Purple126/v4/32/aa/17/32aa1769-e3a0-7fec-a5e5-ec3c40518329/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/460x0w.webp"
            alt="英雄联盟手游"
            class="download-icon"
          />
          <div class="download-info">
            <div class="download-name">英雄联盟手游</div>
            <div class="download-meta">
              <div class="download-size">3.8 GB</div>
              <div class="download-status">
                <i class="fas fa-pause-circle mr-1"></i>
                <span>已暂停 - 43%</span>
              </div>
            </div>
            <div class="download-progress">
              <div class="download-progress-bar" style="width: 43%"></div>
            </div>
          </div>
          <button class="download-btn primary">继续</button>
        </div>

        <!-- 已完成（暂时隐藏） -->
        <div style="display: none">
          <div class="download-empty">
            <div class="download-empty-icon">
              <i class="fas fa-download"></i>
            </div>
            <div class="download-empty-text">你没有已完成的下载</div>
            <a href="home.html" class="download-empty-btn">浏览应用</a>
          </div>
        </div>
      </div>

      <!-- 底部导航栏 -->
      <div class="tab-bar">
        <div class="tab-item">
          <i class="fas fa-home"></i>
          <span>首页</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-compass"></i>
          <span>发现</span>
        </div>
        <div class="tab-item active">
          <i class="fas fa-download"></i>
          <span>下载</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-user"></i>
          <span>我的</span>
        </div>
      </div>
    </div>

    <!-- 引入JavaScript文件 -->
    <script src="../js/main.js"></script>
  </body>
</html>
